<template>
	<view class="j-sub">
		<view class="j-sub-zf">
			<image src="../../../static/image/zfcg.png"></image>
		</view>
		<view class="j-sub-title">
			付款成功</text>
		</view>
		<view class="zfCon">
			<view class="zfitem">
				<view class="zfitem-label">
					支付金额
				</view>
				<view class="zfitem-con">
					{{price}}
				</view>
			</view>
			<view class="zfitem">
				<view class="zfitem-label">
					取货方式
				</view>
				<view class="zfitem-con">
					{{orderType}}
				</view>
			</view>
			<view class="zfitem" style="border-bottom: 0px;">
				<view class="zfitem-label">
					支付方式
				</view>
				<view class="zfitem-con">
					微信支付
				</view>
			</view>
		</view>
		<!-- <view class="j-sub-price">
			恭喜您此次获得<text class="color">{{integral}}知豆</text>
		</view>
		<view class="j-sub-ope">
			<u-button class="j-sub-btn" shape="circle" hover-class="none" @click="toOrder">查看订单</u-button>
			<u-button class="j-sub-home" shape="circle" hover-class="none" @click="toIndex">返回首页</u-button>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderType: '',
				price: '0.00'
			};
		},
		onLoad(e) {
			this.orderType = e.orderType;
			this.price = e.price;
		},
		methods: {
			// 跳转首页
			toIndex() {
				uni.switchTab({
					url: '../index'
				})
			},
			// 跳转订单页
			toOrder() {
				uni.switchTab({
					url: '../../order/order'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.j-sub {
		background: rgb(248, 249, 250);
		width: 100vw;
		height: 100vh;
		text-align: center;
		padding-top: 14vh;

		.j-sub-zf {
			width: 60px;
			height: 60px;
			margin: 0 auto;

			// display: flex;
			// align-items: center;
			// justify-content: center;
			// border-radius: 50%;
			// background: linear-gradient(180deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));
			image {
				width: 60px;
				height: 60px;
			}
		}

		.j-sub-title {
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: 500;
			line-height: 21px;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
			margin-top: 30rpx;

			.font {
				font-weight: bold;
			}
		}

		.zfCon {
			width: 94%;
			/* background: #fff; */
			border-radius: 10px;
			opacity: 1;
			background: #FFFFFF;
			margin: 0 auto;
			padding: 5px 20px;
			margin-top: 5vh;

			.zfitem {
				overflow: hidden;
				border-bottom: 1px solid #ECECEC;
				height: 7vh;
				.zfitem-label {
					float: left;
					height: 7vh;
					font-family: PingFang SC;
					font-size: 15px;
					font-weight: normal;
					line-height: 7vh;
					letter-spacing: 0px;

					color: #999999;
				}

				.zfitem-con {
					float: right;
					height: 7vh;
					font-family: PingFang SC;
					font-size: 15px;
					font-weight: normal;
					line-height: 7vh;
					letter-spacing: 0px;

					color: #333333;
				}
			}
		}

		.j-sub-price {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #797979;

			.color {
				color: red;
			}
		}


		.j-sub-ope {
			display: flex;
			align-items: center;
			margin-top: 50rpx;
			width: 750rpx;
			justify-content: space-between;
		}

		.j-sub-btn {
			color: #000000;
			width: 300rpx;
			background: linear-gradient(90deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));

			&::after {
				border: 0;
			}
		}

		.j-sub-home {
			width: 300rpx;
		}
	}
</style>